<template>
  <div>
    <div class="tips">
      <img :src="img">
      <p>目前暂不支持线上还款，仅支持线下还款，为了您的资金安全，还款前请与收款方进行线下确认再进行打款</p>
    </div>
    <ul class="lists">
      <li class="child" v-for="(list, index) in lists" :key="index" :class="index !== 0 ? 'hairlines-top' : ''">
        <p>
          <span>{{list.due_date}}</span>
          <span class="right">￥{{list.principal_money}}</span>
        </p>
        <p class="text-right">含利息{{'￥' + list.total_money}}</p>
      </li>
    </ul>
    <footer>
      <input class="footer-fullW-bt" type="button" value="返回" @click="back">
    </footer>
  </div>
</template>
<script>
  import img from './img/plan.png'
  import $ from 'edom'

  export default {
    name: 'repayPlan',
    data () {
      return {
        title: '还款计划',
        img: img,
        lists: []
      }
    },
    methods: {
      back () {
        this.$router.go(-1)
      },
      getList () {
        this.axios.post('/api/loanRepay/plan', {
          user_id: this.$store.state.user_id,
          token: this.$store.state.token,
          user_loan_id: this.$route.params.id
        }).then((res) => {
          let data = res.data
          if (data.code !== 200) {
            $().Mnews('工程师喂猫去了', 2000)
            return
          }
          this.lists = data.desc
        })
      }
    },
    created () {
      this.setTitle(this.title)
      this.getList()
    }
  }
</script>
<style lang="scss" scoped>
  @function rem($px) {
    @return $px / 75 * 1rem;
  }
  .tips{
    background: #fff;
    margin-bottom: rem(20);
    padding: rem(23) rem(60) rem(28);
    font-size: rem(26);
    color: #333;
    line-height: 150%;
    img{
      display: block;
      margin: 0 auto rem(20) auto;
      width: rem(100);
      height: rem(115);
    }
  }
  .lists{
    background: #fff;
    margin-bottom: rem(100);
    .child{
      padding: rem(25) rem(24);
      font-size: rem(28);
      color: #333;
      .right{
        float: right;
      }
      .text-right{
        text-align: right;
        color: #666;
      }
    }
  }
  footer{
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    height: rem(90);
  }
</style>
